import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Table, Row, Tag, Col, Button, Input, message, notification, Upload } from 'antd';
import Link from 'umi/link';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DeviceImportor from './device_import'




@connect(({ fakemodel }) => ({ eseModel: fakemodel }))
// eslint-disable-next-line react/prefer-stateless-function
class DeviceList extends PureComponent {

    componentWillMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'fakemodel/fetchDevices',
        });
    }

    render() {

        const objProps = [
            { title: "编号", key: "code", dataIndex: "code" },
            { title: "名称", key: "name", dataIndex: "name" },
            { title: "项目", key: "projectName", dataIndex: "projectName" },
            { title: "类型", key: "typeName", dataIndex: "typeName" },
            { title: "型号", key: "modeName", dataIndex: "modeName" },
            { title: "所属系统", key: "linkedDeviceName", dataIndex: "linkedDeviceName" },
            { title: "位置", key: "address", dataIndex: "address" },
            { title: "备注信息", key: "memo", dataIndex: "memo" }];

        const columns = [
            { title: "编号", key: "code", dataIndex: "code" },
            { title: "名称", key: "name", dataIndex: "name" },
            { title: "项目", key: "projectName", dataIndex: "projectName" },
            { title: "类型", key: "typeName", dataIndex: "typeName" },
            { title: "型号", key: "modeName", dataIndex: "modeName" },
            { title: "所属系统", key: "linkedDeviceName", dataIndex: "linkedDeviceName" },
            { title: "位置", key: "address", dataIndex: "address" },
            { title: "备注信息", key: "memo", dataIndex: "memo" },
            {
                title: '设备参数',
                key: 'device_props',
                dataIndex: 'device_props',
                render: (text, record) => {

                    if (record.device_props != undefined) {
                        return (
                            <span>
                                {record.device_props.map(tag => {
                                    let color = tag.prop_unit == undefined ? 'geekblue' : 'green';
                                    if (tag === 'loser') {
                                        color = 'volcano';
                                    }
                                    return <Tag color={color} key={tag.prop_name}>{tag.prop_name.toUpperCase()}:{tag.prop_value}{tag.prop_unit}</Tag>;
                                })}
                            </span>
                        )
                    }
                    else {
                        return <div />
                    }
                }
            },
            
            {
                title: '操作',
                key: '操作',
                render: (text, record) => (
<Link to={`/iiot_asset/device_info/${record.code}`}>详情</Link>
                 
                ),
            }];

        const { eseModel } = this.props;
        const { Search } = Input;
        return (
            <PageHeaderWrapper  title="设备清单页">
                <Card bordered={false}>
                    <Row gutter={24} style={{ marginBottom: 16 }}>
                        <Col md={6}>
                            <DeviceImportor titleImport="设备信息导入" titleAdd="添加设备信息" objprops={objProps} />
                        </Col>
                        <Col md={18}>
                            <Search
                                placeholder="输入要搜索的信息"
                                onSearch={value => console.log(value)}
                                style={{ width: 300 }}
                            />
                        </Col>
                    </Row>
                    <Row gutter={24} style={{ marginBottom: 16 }}>
                        <Table columns={columns} loading={!eseModel.loadedDevices} dataSource={eseModel.eseDevices} rowKey="code" />
                    </Row>
                    <Row gutter={24} style={{ marginBottom: 16 }}>
                        <span>
                            设备基本信息（设备编号、设备名称、型号规格、设备地点、制造厂家、投产日期、技术状况、使用状态）等静态信息，
                          还包括设备运行（试验、评级、停复役、异动）、维修（缺陷、工单、备品配件）、
                          更换和报废等动态信息
                            4.2.1.3.	技术资料管理
                            检修规程、图纸资料、标准检修文件包等文档管理。
                            4.2.1.4.	故障代码
                            该功能用于对设备故障代码进行设置及维护，结合检修管理使用
                            设备信息包括：编号、名称、位置信息、规格型号、主要技术参数、产品出厂序列号、生产商、供应商、生命周期、生产时间、首次并网时间、投运时间、进入质保期时间、质保年限、缺陷清单、检修记录（时间和操作人）、
                            运行记录（设备状态切换、累计发电量、运行小时数）、等，上述信息支持手动录入、修改。
                            技术文件包括：质量文件、说明书、装配记录、调试试运行报告等，技术文件与设备关联并支持上传下载。
                        </span>
                    </Row>
                </Card>
            </PageHeaderWrapper>
        );
    }
}

export default DeviceList;

